﻿@page "/treeview/node-editing"

@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Navigations

@inherits SampleBaseComponent;

<SampleDescription>
    <p>The <a href='https://www.syncfusion.com/blazor-components/blazor-treeview' target='_blank'>Blazor TreeView</a> sample demonstrates the node editing functionalities of the TreeView. Double click on the node or press F2 key on selected node to edit node's text in input textbox. Press enter key or click outside of the input element to save the node's, or press escape key to cancel the modified text. </p>
</SampleDescription>
<ActionDescription>
   <p>The TreeView component has the built-in option to edit and modify the node text in inline by enabling the <code>AllowEditing</code> property. More information about Treeview can be found in this <a target='blank' href='https://blazor.syncfusion.com/documentation/treeview/node-editing/'>documentation</a> section.</p>
</ActionDescription>

@using Syncfusion
<div class="control-section">
    <div class="control_wrapper">
        <SfTreeView TValue="TreeData" AllowEditing="true">
            <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="Id" ParentID="Pid" Text="Name" HasChildren="HasChild" Expanded="Expanded" Selected="IsSelected"></TreeViewFieldsSettings>
        </SfTreeView>
    </div>
</div>

@code{
    List<TreeData> TreeDataSource = new List<TreeData>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeDataSource.Add(new TreeData
        {
            Id = "1",
            Name = "Discover Music",
            HasChild = true,
            Expanded = true
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "2",
            Pid = "1",
            Name = "Hot Singles",

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "3",
            Pid = "1",
            Name = "Rising Artists"
        });

        TreeDataSource.Add(new TreeData
        {
            Id = "4",
            Pid = "1",
            Name = "Live Music"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "5",
            HasChild = true,
            Name = "Sales and Events",

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "6",
            Pid = "5",
            Name = "100 Albums - $5 Each",
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "7",
            Pid = "5",
            Name = "Hip-Hop and R&B Sale"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "8",
            Pid = "5",
            Name = "CD Deals"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "10",
            HasChild = true,
            Name = "Categories"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "11",
            Pid = "10",
            Name = "Bestselling Albums",

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "12",
            Pid = "10",
            Name = "New Releases"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "13",
            Pid = "10",
            Name = "Bestselling Songs"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "14",
            HasChild = true,
            Name = "MP3 Albums"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "15",
            Pid = "14",
            Name = "Rock"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "16",
            Name = "Gospel",
            Pid = "14",

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "17",
            Pid = "14",
            Name = "Latin Music"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "18",
            Pid = "14",
            Name = "Jazz"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "19",
            HasChild = true,
            Name = "More in Music"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "20",
            Pid = "19",
            Name = "Music Trade-In"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "21",
            Name = "Redeem a Gift Card",
            Pid = "19"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "22",
            Pid = "19",
            Name = "Band T-Shirts"

        });
    }

    class TreeData
    {
        public string Id { get; set; }
        public string Pid { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public bool IsSelected { get; set; }
        public string Name { get; set; }
    }
}

<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>